<template>
  <div :class="['wrapper', 'parent', visible && 'visible']" :style="{ top: `${top + 24}px`, left: `${props.left}px` }">
    <div
      @click="() => itemClick(item)"
      @mouseenter="() => onHover(item)"
      :class="['item', item.children && 'child-hover']"
      v-for="item in menu"
      :key="item.id"
    >
      <i :class="['MC_iconfont', item.icon]"></i>
      <span :data-id="item.id">{{ item.text }}</span>
      <div
        class="wrapper children"
        v-show="item.children && showChildren"
        :style="{ top: `${top + 24}px`, left: `${props.left + 120}px` }"
      >
        <p class="item" @click="() => itemClick(i)" v-for="i in item.children" :key="i.id">
          {{ i.text }}
        </p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { isEmpty } from 'lodash'
import {
  withDefaults,
  defineProps,
  defineEmits,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
  computed,
  watch
} from 'vue'
import { LIMIT_LEVEL } from './constance'
import * as ids from '../constance'
import { TagNode } from '@/common/interface/node'
interface Props {
  top: number
  left: number
  visible: boolean
  node: Partial<TagNode>
  getNodeIndex: any
}

interface Menu {
  icon?: string
  text: string
  id: string
  children?: Menu[]
}

interface State {
  showChildren: boolean
  menu: Menu[]
}

const props = withDefaults(defineProps<Props>(), {
  top: 100,
  left: 100,
  visible: false,
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  getNodeIndex: () => {}
})
const state: State = reactive({
  showChildren: false,
  menu: [
    {
      icon: 'MC_icon-tianjia-yuan-xian',
      text: '新建',
      id: ids.ADD,
      children: [
        { text: '同级服务组', id: ids.ADD_SIBLING },
        { text: '子级服务组', id: ids.ADD_CHILD }
      ]
    },
    {
      icon: 'MC_icon-bianji1-xian',
      text: '编辑',
      id: ids.EDIT
    },
    {
      icon: 'MC_icon-paixu-shengxu',
      text: '上移',
      id: ids.MOVE_UP
    },
    {
      icon: 'MC_icon-paixu-jiangxu',
      text: '下移',
      id: ids.MOVE_DOWN
    },
    {
      icon: 'MC_icon-shanchu1-xian',
      text: '删除',
      id: ids.DEL
    }
  ]
})
const { showChildren } = toRefs(state)
watch(
  props.node,
  (node) => {
    state.menu[0].children =
      node.level === LIMIT_LEVEL
        ? [{ text: '同级服务组', id: ids.ADD_SIBLING }]
        : [
            { text: '同级服务组', id: ids.ADD_SIBLING },
            { text: '子级服务组', id: ids.ADD_CHILD }
          ]
  },
  { deep: true, immediate: true }
)
const top = computed(() => {
  const limitH = window.screen.availHeight - 400
  if (props.top > limitH) {
    return props.top - 200
  }
  return props.top
})
const menu = computed(() => {
  if (!props.getNodeIndex || isEmpty(props.node)) {
    return state.menu
  }
  const { node } = props.getNodeIndex(props.node)
  const { index, isLast } = node || {}
  if (props.node.level === 1) {
    return state.menu
      .filter((i) => (index === 1 ? i.id !== ids.MOVE_UP : true))
      .filter((i) => (isLast ? i.id !== ids.MOVE_DOWN : true))
  }
  return state.menu
    .filter((i) => (index === 0 ? i.id !== ids.MOVE_UP : true))
    .filter((i) => (isLast ? i.id !== ids.MOVE_DOWN : true))
})
const emits = defineEmits(['item-click', 'hide'])

onMounted(() => document.addEventListener('click', onHide))

onBeforeUnmount(() => document.removeEventListener('click', onHide))

const onHide = (e: any) => {
  if (e.target?.dataset?.id === ids.ADD) {
    return
  }
  emits('hide')
  state.showChildren = false
}

const itemClick = (item: Menu) => {
  emits('item-click', item)
}

const onHover = (item: Menu) => {
  state.showChildren = item.id === ids.ADD
}
</script>
<style lang="stylus" scoped>
.wrapper
  position fixed
  display none
  background: #FFFFFF;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  z-index 999
.visible
  display block
.item
  width: 100px;
  height: 44px;
  line-height 44px
  text-align center
  cursor pointer
  margin 0
  span
   margin-left 9px
   font-size 14px
   color rgba(0, 0, 0, 0.88)
  i
   color: rgba(0, 0, 0, 0.6);
 .item:hover
  background: var(--mc-gray1-color);
 .parent
  padding 4px 0
 .children
  display block
  margin-left 10px
  padding 4px 0
  font-size 14px
  box-sizing border-box
 .child-hover:hover .children
  display block
</style>
